<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Private Browser</title>
    <link rel="shortcut icon" href="./imgs/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/common.css">
    <script src="./js/vue.js"></script>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
</head>
<style>
    body {
        background: linear-gradient(to right, #9cecfb, #0053d4);
    }
</style>
<body>
    <div id="app" v-cloak>

        <section>

            <new-box box-type="big" v-for="item in hot" :news="item" :key="item.id"></new-box>

            <div v-show="loading" class="loading">
                <img src="./imgs/loading.svg" alt="loading" width="50">
            </div>

        </section>
        
        <self-menu page="hot"></self-menu>

    </div>
</body>
<script src="./main.js"></script>
<script type="module">
    import { newBox, menu } from './components/index.js'
    var vm = new Vue({
        el: '#app',
        components: {
            newBox,
            selfMenu: menu
        },
        data() {
            return {
                page: 1,
                limit: 7,
                hot: [],
                loading: true
            }
        },
        created() {
            this.handleFetchArticle(true)
        },
        mounted() {
            this.$nextTick(() => {
                handleReachBottom(this.handleScroll)
            })
        },
        methods: {
            handleScroll() {
                if (this.loading) {
                    return
                }

                this.handleFetchArticle()
            },
            handleFetchArticle(init = false) {
                this.loading = true
                fetch('https://migame.vip/gamefront/blog/blogApiList', {
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    },
                    method: 'post',
                    body: JSON.stringify({
                        pageNum: this.page,
                        pageSize: this.limit,
                        blogTypeId: 1 // 金融
                    })
                })
                    .then(res => res.json())
                    .then(res => {
                        if (res.code == 0) {
                            this.hot.push(...res.data)
                        }
                        this.page++
                    })
                    .catch(err => {
                        throw new Error(err)
                    })
                    .finally(() => {
                        this.loading = false
                        this.isFirst = true
                    })
            },
        }
    })
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M8Y782V4G7"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-M8Y782V4G7');
</script>
</html>